<template>
  <div :style="{ width: '100%', height: echartHeight }">
    <!-- <div
      :id="echartId"
      :style="{ width: '100%', height: echartHeight, backgroundColor: 'pink' }"
    >
      123
    </div> -->

    <div style="height: 100%" :id="echartId"></div>
    <!-- <div v-if="data.length == 0" class="bar_defGraphWrap">
      <div class="bar_defGraph"></div>
      <div class="bar_graphText">暂无数据</div>
    </div> -->
  </div>
</template>

<script>
import this_$echarts from "@/libs/echart-import";
export default {
  name: 'lineEcart',
  props: {
    echartId: {
      type: String,
      default: () => 'echartId'
    },
    data: {
      type: Array,
      default: () => []
    },
    dataObj: {
      type: Object,
      default: () => {}
    },
    echartHeight: {
      type: String,
      default: () => '230px'
    },
    type: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      barLineChart: null,
      barLineData: [],
    }
  },
  watch: {
    data: {
      handler: function (newData, oldData) {
        this.data = newData
        this.getBarData()
      },
      deep: true
    },
    echartId: {
      handler (newVal, oldVal) {
        if (newVal != oldVal) {
          this.echartId = newVal
        }
      },
      deep: true
    }
  },
  created () { },
  mounted () {
    this.getBarData()
    window.addEventListener('resize', () => {
      this.barLineChart && this.barLineChart.resize()
    })
  },

  methods: {
    getBarData () {
      this.data.length > 0 || this.dataObj ? this.$nextTick(() => {
        this.barLineChart = this_$echarts.init(document.getElementById(this.echartId))
        this.barLineData = this.barLineChart
        this.barLineChart.setOption(this.getBarOption(this.data))
        // chartShowName(this.barLineChart)
      }) : (this.barLineData = null)
    },
    // 柱状图配置
    getBarOption (data) {
      // console.log('🚀getBarOption ~ data:', data)
      // let dataList = data.data.slice(0, 20)
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // type: 'cross'
            type: 'none', // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: 'white',
          borderColor: '#999',
          borderRadius: 5,
          textStyle: {
            color: "#000" //设置文字颜色
          },
          extraCssText: 'box-shadow:0 0 3px rgba(0,0,0,0.3)',
          appendToBody: true
        },
        legend: {
          type: 'scroll',
          bottom: 0,
          itemWidth: 10,
          itemHeight: 10,
          left: 'center',
          orient: "horizontal",
          // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          data: this.getLegend(data)
        },

        grid: {
          bottom: '10%',
          left: '1%',
          right: '1%',
          top: '12%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // axisLabel: { show: false },
            axisLabel: {
              color: '#999999',
            },
            axisLine: { show: false },
            axisTick: { show: false },
            boundaryGap: true, // 坐标轴两边是否留⽩
            triggerEvent: true,
            // boundaryGap: ['20%', '20%'],
            // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            data: this.getTime(data)
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false }
          }
        ],

        series: this.getSeries(data)
      }
    },

    getSeries (data) {
      let arr = []
      data.forEach((item, index) => {
        arr.push({
          name: item.name,
          type: 'line',
          stack: '总量',
          data: item.total
        })
      })
      return arr;
    },

    getLegend (data) {
      let arr = []
      data.forEach((item, index) => {
        arr.push(item.name)
      })
      return arr;
    },
    getTime (data) {
      let arr = data.reduce((prev, next) => {
        return prev.time.length > next.time.length ? prev : next
      })
      return arr.time;
    },
  }
}
</script>

<style scoped>
.bar_defGraphWrap {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  left: 0;
  padding-bottom: 10px;
}
.bar_defGraph {
  margin-left: 0px;
  height: 50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../../../assets/globalIcon/defGraph.png") no-repeat center
    center;
  /* background-size: 100% 100%; */
  background-size: 50% 100%;
  transform: translate(-50%, -50%);
}
.bar_graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>